<template>
	<view class="shop-main-container">
		<view class="main-bg-color">
			<auto-header></auto-header>
			<auto-round>
				<view class="add-title">+创建店铺</view>
				<view class="sub-title">店铺经营一手掌握</view>
				<view class="add-input">
					<input :focus="focusState" @blur="onBlur()" v-model="shopName" placeholder-class="normal-placeholder" placeholder="输入一个名称，开启一个店铺"/>
				</view>
				
				<view class="add-button-view">
					<button :class="checkName()?'add-button':'add-button-disabled'" @click="onSaveShop()" :plain="true">
						{{checkName()?'立即创建，开启新征程':'请先输入店铺名称'}}
					</button>
				</view>
			</auto-round>
			
			<view class="function-view">
				<view class="single-fun"><span>会员管理</span></view>
				<view class="single-fun"><span>客户分析</span></view>
				<view class="single-fun"><span>员工管理</span></view>
				<view class="single-fun"><span>经营提成</span></view>
				<view class="single-fun"><span>收银统计</span></view>
				<view class="single-fun"><span>经营分析</span></view>
			</view>
		</view>
	</view>
</template>

<script>
var that;
export default {
	data() {
		return {
			bgColor: '',
			shopName: '',
			focusState: true,
			submiting: false
		}
	},
	onLoad() {
		that = this;
		that.bgColor = "#fd521b";
	},
	methods: {
		onSaveShop: function() {
			if(!this.shopName) {
				this.focusState = true;
			} else {
				this.submiting = true;
				this.$request.get("/shop/saveShop", {shopName: this.shopName, status: "1"}, {"method": "post"}).then((res) => {
					if(res.flag) {
						uni.showToast({
							title: "创建成功",
							icon: "success",
							success() {
								uni.switchTab({
									url: "/pages/index/index"
								})
							}
						})
					}
				})
			}
		},
		checkName: function() {
			const name = this.shopName.trim();
			return !this.submiting && (name && name.length>1);
		},
		onBlur: function() {
			this.focusState = false;
		}
	}
}
</script>

<style lang="scss">
.shop-main-container {
	width: 100%;
	
	.main-bg-color {
		height: 100vh;
	}
	
	.add-title {
		width: 100%; font-size: 50rpx; font-weight: bold; letter-spacing: 8rpx; text-align: center; margin-top: 100rpx;
	}
	
	.sub-title {
		font-size: 28rpx; text-align: center; width: 100%; margin-top: 60rpx; color: #fec3b8; letter-spacing: 6rpx;
	}
	.add-input {
		width: 100%; padding: 40rpx 0px; margin: 30rpx 0;
		
		input {
			background:#fff1ed;
			height: 100rpx; border:1px #fff solid; width: 80%; margin-left: 10%; border-radius: 20rpx; text-align: center; color:#000; font-weight: bold;
		}
		.normal-placeholder {
			color:#aaa; font-weight: normal; 
		}
	}
	
	.add-button-view {
		text-align: center; width: 60%; margin-left: 20%;
		
		.add-button {
			background:#f96231; border: 1px #fe9a7a solid; color:#FFF; 
		}
		.add-button-disabled {
			background: #fd521b;
			border: 1px #fe9a7a solid;
			color: #f7ad96;
		}
	}
	
	.function-view {
		width: 80%; margin-left: 10%; margin-top: 120rpx; border-top: 1px #fe9a7a dotted; padding-top: 80rpx;
		
		.single-fun {
			display: inline-block; text-align: center; width: 33%; margin-bottom: 50rpx;
			
			span {
				font-size: 26rpx; padding: 8rpx 16rpx; border:1px #fe9a7a solid; color:#f1d4cc; border-radius: 10rpx;
			}
		}
	}
}

</style>
